<template>
    <div class="heart">
      <el-breadcrumb separator="">
        <el-breadcrumb-item :to="{ path: '/dataReport' }">数据报表</el-breadcrumb-item>
        <el-breadcrumb-item
        ><a></a></el-breadcrumb-item
      >
      </el-breadcrumb>
      <div class="area">
        <div class="selectItem" style="margin-bottom: 0;">
          <h2>小时数据异常缺失</h2>
          <el-switch
          v-model="total"
          size="large"
          active-text="开启"
          inactive-text="关闭"
          />
        </div>
        <div class="description">开启后可对因子小时数据异常缺失报警</div>
        <div class="selectItem">
          <span>缺失时长</span>
          <div>
            <el-input-number v-model="hours" :min="1" :max="10" style="margin-right: 10px" :disabled="!total"/>小时
          </div>
        </div>
        <div class="selectItem">
          <span>持续预警</span>
          <div>
            <el-switch
          v-model="isContinue"
          size="large"
          active-text="开启"
          inactive-text="关闭"
          style="margin-right: 10px"
          :disabled="!total"
          />
          <span class="description">开启后缺失数据未恢复前将持续报警</span>
          </div>
        </div>
        <div class="selectItem">
          <span>预警间隔</span>
          <div>
            <el-input-number v-model="interval" :min="1" :max="10" style="margin-right: 10px" :disabled="!total"/>小时
          </div>
        </div>
        <div class="selectItem" style="margin-bottom: 0;">
          <h2>小时数据缺失恢复</h2>
          <el-switch
          v-model="recover"
          size="large"
          active-text="开启"
          inactive-text="关闭"
          :disabled="!total"
          />
        </div>
        <div class="description">开启后可对缺失的小时数据恢复进行报警</div>
        <div class="selectItem" style="margin-bottom: 0;">
          <h2>屏蔽持续离线时缺失预警</h2>
          <el-switch
          v-model="shield"
          size="large"
          active-text="开启"
          inactive-text="关闭"
          :disabled="!total"
          />
        </div>
        <div class="description">开启当数采仪离线数小时后屏蔽预警</div>
        <div class="selectItem">
          <span>缺失时长</span>
          <div>
            <el-input-number v-model="missing" :min="1" :max="10" style="margin-right: 10px" :disabled="!total"/>小时
          </div>
        </div>
      </div>
    </div>
  </template>
  <script lang="ts" setup>
  import { ref, watch, onMounted, reactive,  } from 'vue'
  let total = ref()
  let hours = ref()
  let isContinue = ref()
  let interval = ref()
  let recover=  ref()
  let shield=ref()
  let missing = ref()
  </script>
  <style>
    .heart{
      width: 95%;
      margin: 20px auto;
    }
    .search{
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
    }
    .pagination{
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
    .area{
      width: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-70%);
    }
    .selectItem{
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .description{
      font-size: 12px;
      color: gray;
      margin-bottom: 20px;
    }
    h2{
      margin: 0;
      padding: 0;
    }
  </style>